<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择时段"
      >
      </el-date-picker>
      <el-button type="primary">查询</el-button>
    </div>
    <div style="padding-top:10px ">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          property="name"
          label="质控品靶值"
          width="100"
        >
        </el-table-column>

        <el-table-column
          property="fixAvgVal"
          label="固定均值"
          width="120"
        >
        </el-table-column>
        <el-table-column
          property="SD1"
          label="SD"
        >
        </el-table-column>
        <el-table-column
          property="CV1"
          label="CV"
        >
        </el-table-column>
        <el-table-column
          property="fixAvgVal"
          label="区间均值"
          width="120"
        >
        </el-table-column>
        <el-table-column
          property="SD2"
          label="SD"
        >
        </el-table-column>
        <el-table-column
          property="CV2"
          label="CV"
        >
        </el-table-column>
        <el-table-column
          property="fixAvgVal"
          label="累计均值"
          width="120"
        >
        </el-table-column>
        <el-table-column
          property="SD3"
          label="SD"
        >
        </el-table-column>
        <el-table-column
          property="CV3"
          label="CV"
        >
        </el-table-column>
      </el-table>
    </div>
    <div>
      <EchartsForm name="top"/>
      <EchartsForm name="top2"/>
      <EchartsForm name="top3"/>
    </div>
    <div>
      <div class="other-texts inline-list">
        <div class="list">检验人：王惠玉</div>
        <div class="list" style="padding-left: 200px"> 统计时间：2021/09/01 12:00</div>
        <div class="list" style="padding-left: 200px"> 核对人：余晖维</div>
      </div>
    </div>
    <div>
      <el-card class="box-card danger-card">
        <div class="other-texts inline-list">
          <div class="list">质控结果：<span style="color: red">失控</span></div>
          <div class="list" style="padding-left: 750px ;margin-top: -1px">
            <el-button type="danger">发送失控处理申请</el-button>
          </div>
        </div><!--other-texts 信息列表-可单独使用--->
      </el-card><!------el-card danger-card 预警卡片 -->
    </div>
    <div style="padding-left: 300px;width: 500px;height: 300px" >
      <p class="table_p">填写可能原因</p>
      <el-checkbox-group v-model="checkList">
        <div style="width: 500px;">
          <el-checkbox label="试剂"></el-checkbox>
          <el-checkbox label="质控品"></el-checkbox>
          <el-checkbox label="仪器设备"></el-checkbox>
        </div>
        <div style="width: 500px;">
          <el-checkbox label="环境温度湿度"></el-checkbox>
          <el-checkbox label="水质"></el-checkbox>>
        </div>
        <div style="width: 500px;">
          <el-checkbox label="其他"></el-checkbox>
          <input v-model="input" placeholder="请填写具体内容" style="margin-left: 10px"/>
        </div>
      </el-checkbox-group>
         <br/>
         <br/>
         <br/>
 <div style="width: 500px;padding-left: 300px">
  <el-button>取消</el-button>
  <el-button type="primary">确定</el-button>
</div>
    </div>
    <div>
      <p>失控处理</p>
      <div>
        <div class="other-texts inline-list">
          <div class="list">可能原因：试剂</div>
          <div class="list" style="padding-left: 150px"> 失控报告人：刘青</div>
          <div class="list" style="padding-left: 100px"> 处理人：张欣慧</div>
          <div class="list" style="padding-left: 100px"> 处理日期：2021/09/08 12:00</div>
        </div>
      </div>
      <p>最终原因</p>
      <div>
        <div style="font-size: 8px">
          <div style="float: left"><span>试剂：</span></div>
          <div style="float: left">
            <el-checkbox-group v-model="reagentList">
              <el-checkbox label="气泡"></el-checkbox>
              <el-checkbox label="变质"></el-checkbox>
              <el-checkbox label="误加或位置错"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="font-size: 8px">
          <div style="float: left;padding-left: 30px"><span>质控品：</span></div>
          <div style="float: left">
            <el-checkbox-group v-model="reagentList">
              <el-checkbox label="气泡"></el-checkbox>
              <el-checkbox label="变质"></el-checkbox>
              <el-checkbox label="误加或位置错"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="font-size: 8px">
          <div style="float: left;padding-left: 30px"><span>仪器设备：</span></div>
          <div style="float: left">
            <el-checkbox-group v-model="reagentList">
              <el-checkbox label="系统准确度漂移"></el-checkbox>
              <el-checkbox label="管路原因"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div style="padding-top: 40px">
        <div style="font-size: 8px;float: left">
          <div style="float: left"><span>环境温度：</span></div>
          <div style="float: left">
            <el-checkbox-group v-model="reagentList">
              <el-checkbox label="高"></el-checkbox>
              <el-checkbox label="低"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="font-size: 8px;padding-left: 100px;float: left">
          <div style="float: left"><span>水质：</span></div>
          <div style="float: left">
            <el-checkbox-group v-model="reagentList">
              <el-checkbox label="不合格"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="font-size: 8px;padding-left: 100px;float: left">
          <span>其他：</span>
          <input v-model="input" placeholder="请填写具体内容" style="margin-left: 10px"/>
        </div>
      </div>
      <div style="padding-top: 40px">
        <span>备注:</span>
        <input v-model="input" placeholder="备注" style="margin-left: 10px"/>
      </div>
      <div style="padding-top: 20px">
        <span>处理措施:</span>
        <input v-model="input"  style="width: 100%;height: 40px"/>
      </div>
      <div>
        <span>失控纠正后，是否可进行常规检测：</span>
        <el-radio v-model="radio" label="1">否</el-radio>
        <el-radio v-model="radio" label="2">是</el-radio>
      </div>
      <div>
        <span>如当天已进行标本检测，应执行失控前标本验证：</span>
        <el-radio v-model="checkRadio" label="1">已执行</el-radio>
        <el-radio v-model="checkRadio" label="2">不适用</el-radio>
        <input v-model="checkInput" placeholder="请填写不适用原因" style="margin-left: 10px"/>
      </div>
      <div style="padding-top: 40px">
        <span>对临床影响</span>
        <input v-model="clinicalEffects"  style="margin-left: 10px;width: 80%"/>
      </div>
      <div style="padding-top: 40px">
        <span>预防措施</span>
        <input v-model="precautions"  style="margin-left: 10px;width: 80%"/>
      </div>
      <div>  <el-button type="primary">提交</el-button>
        <el-button>取消</el-button></div>
    </div>
  </div>
</template>

<script>
import EchartsForm from '../../../components/echartsForm/index.vue'
export default {
  name: 'qualityGraphs',
  components: { EchartsForm },
  data() {
    return {
      value1: '',
      tableData: [],
      checkList: '',
      input: ''
    }
  },
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    handleLoadAndQuery() {
      let row1 = {
        name: '水平1',
        fixAvgVal: 40.9,
        SD1: 1.64,
        CV1: '4%',
        rangeAvgVal: 40.9,
        SD2: 1.64,
        CV2: '4%',
        totalAvgVal: 40.9,
        SD3: 1.64,
        CV3: '4%'
      }
      let row2 = {
        name: '水平2',
        fixAvgVal: 155.14,
        SD1: 1.64,
        CV1: '4%',
        rangeAvgVal: 155.14,
        SD2: 1.64,
        CV2: '4%',
        totalAvgVal: 155.14,
        SD3: 1.64,
        CV3: '4%'
      }
      this.tableData.push(row1, row2)
    }
  }
}
</script>

<style>
.table_p {
  background: rgb(72 120 231);
  width: 500px;
  color: rgb(185 204 245);
  height: 40px;
  font-size: 20px;
  padding-top: 5px
}
</style>
